Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.
This article will look at how to get started with UI development with Chakra UI Vue.
Box
We can use the c-box
component to add a flex container into our Vue app.
For instance, we can write:
<template>
<c-box bg="tomato" w="100%" p="4" color="white"> This is the Box </c-box>
</template>
<script>
import { CBox } from "@chakra-ui/vue";
export default {
components: {
CBox,
},
};
</script>
to add a container with c-box
.
bg
is the background color.
w
is the width.
p
is the padding in pixels.
color
is the content color.
We can use c-box
to house other components.
For instance, we can write:
<template>
<c-box maxW="sm" border-width="1px" rounded="lg" overflow="hidden">
<c-image
src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"
/>
<c-box d="flex" align-items="baseline">
<c-badge rounded="full" px="2" variant-color="green"> New </c-badge>
<c-box
color="gray.500"
font-weight="semibold"
letter-spacing="wide"
font-size="xs"
text-transform="uppercase"
ml="2"
>
2 beds • 2 baths
</c-box>
</c-box>
</c-box>
</template>
<script>
import { CBox, CBadge, CImage } from "@chakra-ui/vue";
export default {
components: {
CBox,
CBadge,
CImage,
},
};
</script>
to add an image with the c-image
component inside.
And we have another c-box
inside the outer one.
We make it a flex container with the d
prop set to flex
.
align-items
set the align-items
CSS property.
border-width
sets the border width.
rounded
adds border-radius.
maxW
sets the max-width.
Conclusion
We can add a flex container into our Vue app with Chakra UI Vue.